<template>
    <div class="turnover" id="turnover">
        turnover
    </div>
</template>

<script>
import {dateFomat} from '@/utils/formValidate'
import {turnoverStatistics} from '@/api/report'
export default {
    props:["date"],
    watch:{
        date(newDate,oldDate){
            this.drawChart();
        }
    },
    mounted() {
        this.drawChart();
      
    },
    methods:{
        drawChart() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(document.getElementById("turnover"));
            // console.log(myChart)
            // 指定图表的配置项和数据
            let option = {
            title: {
                text: "营业额统计",
            },
            tooltip: {},
            legend: {
                data: ["销量"],
            },
            xAxis: {
                data: ["5-1", "5-2", "5-3", "5-4", "5-5", "5-6"],
            },
            yAxis: {},
            series: [
                {
                name: "销量",
                type: "line",
                data: [5, 20, 36, 10, 10, 20],
                },
            ],
        };
        myChart.showLoading();
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        turnoverStatistics(this.date[0],this.date[1]).then(res=>{
            // console.log(res.data)
            myChart.setOption({
                xAxis: {
                    data: dateFomat(res.data.dateList),
                },
                series: [
                    {
                        data: res.data.turnoverList.split(','),
                    },
                ],
            })
            myChart.hideLoading();
        })
        },
    },

}
</script>

<style scoped>
.turnover{
  height: 400px;
  width: 600px;
}
</style>